<template>
  <div class="configuration-management-detail">

    <div>
      <div class="ivu-table-wrapper">
        <div class="ivu-table ivu-table-default ivu-table-border">
          <div class="ivu-table-header">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
              <colgroup>
                <!-- <col width="266" />
                <col width="266" />-->
              </colgroup>
              <thead>
                <tr>
                  <th colspan="2">
                    <div class="ivu-table-cell">
                      <span class>作废调整单详情</span>
                    </div>
                  </th>
                </tr>
              </thead>
            </table>
          </div>
          <div class="ivu-table-body">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
              <tbody class="ivu-table-tbody">
                <tr class="ivu-table-row">
                  <td colspan="2">
                    <div class="ivu-table-cell">
                      <span>单据操作：{{detail.operateTypeText}}</span>
                    </div>
                  </td>
                </tr>
                <tr class="ivu-table-row">
                  <td class>
                    <div class="ivu-table-cell">
                      <span>门店信息：{{ detail.orgName }}</span>
                    </div>
                  </td>
                  <td class>
                    <div class="ivu-table-cell">
                      <span>原单据编号：{{ detail.voucherCode }}</span>
                    </div>
                  </td>
                </tr>
                <tr class="ivu-table-row">
                  <td colspan="2" class>
                    <div class="ivu-table-cell">
                      <!-- <span>Jim Green</span> -->
                      <div class="ivu-table ivu-table-default">
                        <table
                          class="table-border-none"
                          cellspacing="0"
                          cellpadding="0"
                          border="0"
                          style="width: 100%;"
                        >
                          <tr class="ivu-table-row">
                            <td>单据类型：{{detailInfo.changeType}}</td>
                            <td>入库类型：{{detailInfo.goodsTypeName}}</td>
                            <td>库房选择：{{detailInfo.whName}}</td>
                            <td>入库时间：{{detailInfo.selectCreated}}</td>
                          </tr>
                          <tr class="ivu-table-row">
                            <td>入库来源：{{detailInfo.changeItemText}}</td>
                            <td>收货人：{{detailInfo.receiver}}</td>
                            <td>发货人：{{detailInfo.shipper}}</td>
                            <td></td>
                          </tr>
                          <tr class="ivu-table-row">
                            <td colspan="4">
                              <Table
                                style="margin: 15px 0;"
                                :max-height="resData.length > 10 ? 530 : 0"

                                stripe
                                :columns="columns"
                                :data="resData"
                              >
                              </Table>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </div>
                  </td>
                </tr>
                <!---->

                <tr class="ivu-table-row">
                  <td class>
                    <div class="ivu-table-cell">
                      <span>创建人：{{detail.creatorName}}</span>
                    </div>
                  </td>
                  <td class>
                    <div class="ivu-table-cell">
                      <span>操作时间：{{detail.operateDate}}</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <div class="ivu-table-cell">
                      <span>修正说明：{{detail.detail && detail.detail.remark}}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// pointUpdate couponList
import { repairDetail } from '@/api/inventory/supply'
import { Decimal } from 'decimal.js'
import { formatAmount } from '@/libs/tools'
export default {
  name: 'configuration_management_detail',
  data () {
    return {
      detail: {},
      detailInfo: {},
      coupon: {},
      columns: [
        {
          title: '品名',
          key: 'goodsName',
          align: 'center'
        },
        { title: '规格', key: 'refName', align: 'center' },
        { title: '单位', key: 'quantityUnit', align: 'center' },
        {
          title: '单价',
          key: 'unitPriceSale',
          align: 'center'
        },
        {
          title: '数量',
          key: 'actualQuantity',
          align: 'center'
        },
        { title: '金额',
          key: 'unitPriceSale',
          align: 'center',
          render: (h, params) => {
            return h('span', formatAmount((new Decimal(params.row.unitPriceSale).mul(params.row.actualQuantity).toFixed(2))))
          }
        }
      ],
      resData: []
    }
  },
  computed: {

  },
  created () {
    this.repairDetail()
  },
  methods: {

    async repairDetail () {
      const res = await repairDetail({ id: this.$route.params.id })
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.detail = res.data.data || {}

      let detailInfo = (res.data.data && res.data.data.detail) || {}
      if (detailInfo.changeType === 'STOCK_IN' || detailInfo.changeType === 'RESTOCK') {
        detailInfo.changeType = '入库单'
      } else {
        detailInfo.changeType = '出库单'
      }
      let arr = ((detailInfo && detailInfo.goodsList) || []).map(item => {
        if (detailInfo.changeItem === 'IN_DEVICE') {
          item.goodsName = item.whName
        }
        return item
      })
      this.detailInfo = detailInfo
      this.resData = arr
    }
  }
}
</script>

<style lang="less" scoped>
.configuration-management-detail {
  // width: 960px;
  margin: 0 auto;
  padding: 40px 80px;

  // margin-top: 100px;
  .ivu-table-border .table-border-none th,
  .ivu-table-border .table-border-none td {
    border-right: none;
  }
  .ivu-table .table-border-none th,
  .ivu-table .table-border-none td {
    border-bottom: none;
  }
  .imageUrl {
    max-width: 300px;
    max-height: 400px;
  }
  .ivu-table-cell-img {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
</style>
